JQuery3

1. 动画效果

1.1 显示与隐藏

<script type="text/javascript">
    $(function(){
        //1、 隐藏 hide()
        $('#b2').click(function() {
            
            // 隐藏标签 hide()
            // 1、hide()
            //$('#d1').hide();
            
            // 2、hide(speed) :speed秒数 以毫秒为单位 动画执行的时间
            // $('#d1').hide(3000);
            
            // 3、hide(speed, callback)
            // speed秒数 以毫秒为单位 动画执行的事件
            // callback:回调函数 当动画执行结束后调用该函数
            $('#d1').hide(3000, function(){
                alert('动画结束')
            });
            
            
        // 2、显示 show()  
        $('#b1').click(function(){
            $('#d1').show( )
        })    
        })
        

        // 3、显示与隐藏
        $('#b3').click(function(){
            // 显示或隐藏 toggle()
            $('#d1').toggle();
        })
    })
</script> 

1.2 淡入与淡出

<script type="text/javascript">
    $(function () {
        // 淡出
        $('#b2').click(function () {
            // 淡出 fadeOut()
            // fadeOut(speed)
            // fadeOut(speed, callback)
            $('#d1').fadeOut(1000)
            
        })
        
        $('#b1').click(function () {
            // 淡入 fadeIn()
            // fadeIn(speed)
            // fadeIn(speed, callback)
            $('#d1').fadeIn(1000)
            
        })
        
        // 淡入与淡出
        $('#b3').click(function () {
            $('#d1').fadeToggle(1000)
            
        })
        
        // 透明度变化
        $('#b4').click(function () {
            $('#d1').fadeTo(1000, 0.3);
        })
        
    })
</script>

1.3 划入与划出

<script type="text/javascript">
    // 划出 slideUp
    $('#b2').click(function () {
        // slideUp(speed, callback)    
        $('#d1').slideUp(1000)
            
    })
    
    $('#b1').click(function () {
        $('#d1').slideDown(1000)
        
    })
    
    $('#b3').click(function () {
        $('#d1').slideToggle(1000)
        
    })
    
                

</script>

1.4 animation

<script type="text/javascript">
    $(function(){
        $('#id1').click(function () {
           // 更改div的某一个样式
           // animate(更改的样式及样式值(数据类型为字典格式),动画的持续时间)
           $('#div1').animate({width:'500px'}, 3000);
        })
        
        $('#id2').click(function () {
            // 更改div的宽度 高度 透明度 背景颜色
            // 如果想要通过动画改颜色需要引入另一个文件
            $('#div1').animate({width:'500px', height:'500px', 
            backgroundColor: 'blue', opacity:0.3}, 3000);
        })
        
        $('#id3').click(function  () {
            // 相对值：在上一次的基础上进行操作
            // 位置向右下角位置移动20px
            // $('#div1').css({'position':'relative'})
            $('#div1').animate({width:'+=30px', height:'+=30px',
            left:'+=30px', top:'+=30px'},2000)
        })
        
        // 动画队列
        $('#id4').click(function(){
            $('#div1').animate({width:'500px'},1000);
            $('#div1').animate({height:'500px'},1000);
            $('#div1').animate({top:'500px'},1000);
            $('#div1').animate({left:'500px'},1000);
        })
        
        // 动画队列的设置：进入或移出动画队列
        // animate会自动将动画放到动画队列中，但css不属于动画
        // 不会自动放到动画队列中，需要手动设置。
        $('#id5').click(function(){
            $('#div1').animate({width:'500px'},3000);
            $('#div1').animate({height:'500px'},3000);
            // queue 队列 每个可以设置动画的标签都有
            // 将css放到动画队列中
            $('#div1').queue(function(){
                $('#div1').css('background-color','blue');
                // 让后面的动画继续执行
                $('#div1').dequeue();
            })
            $('#div1').animate({width:'100px'},3000);
            $('#div1').animate({height:'100px'},3000);
        })
        
        // 结束动画
        // 1、clearQueue
        // 2、stop(boolean, boolean);
        // 3、finish()
        $('#id6').click(function () {
            // clearQueue()
            // 当前正在执行的动画继续执行直到完成，但后面的动画不再执行
            $('#div1').clearQueue();
            
        })
        
        
        $('#id7').click(function () {
            // 当前正在执行的动画立即结束，继续执行后面的动画
            // $('#div1').stop();
            //$('#div1').stop(false,false);
            //$('#div1').stop(false);
            
            // 结束所有动画
            //$('#div1').stop(true);
            //$('#div1').stop(true, false);
            
            // 立即完成当前动画，继续执行后面的动画
            // $('#div1').stop(false, true);
            
            // 立即完成当前动画，不再继续执行后面的动画
            //$('#div1').stop(true, true);
            
        })
        
        
        $('#id8').click(function(){
            // finish()
            // 直接完成所有动画
            $('#div1').finish();
        })
        
        // jQuery：链式写法
        // 当主语一致时候，可以使用链式结构
        $('#id9').click(function(){
            $('#div1').animate({width:'500px'},1000).animate({height:'500px'},1000).animate({top:'500px'},1000).animate({left:'500px'},1000);
            
            
        })
        
        
        $('#id10').click(function () {
            //延迟动画
            $('#div1').delay(5000).animate({width:'500px'});
        })
        
        
        
    })
</script>

2. 数据请求

2.1

数据请求：
异步加载数据：页面卡顿少
同步加载数据：当数据量较大，或者网络不好，有可能页面卡顿
同步请求：交易*/

异步加载
load(url, [callback])
url：接口 路由
callback：回调函数 无论数据是否请求成功，只要请求完成，就会执行

<script type="text/javascript"> 
     $('button').click(function(){
         // 1、load加载整个html文件
         // $('div').load('loadTest.html');
         
         //2、load加载部分html文件
         //$('div').load('loadTest.html #p2');
         
         //3、回调函数
         $('div').load('loadTest.html', function(responseText, status, XMLHttpRequest){
             console.log('加载完成')
             console.log(responseText); //请求的数据
             console.log(status);  // 请求结论 success   
             console.log(XMLHttpRequest); // 请求相关参数
             console.log(XMLHttpRequest.status); // 200
             /*
              * status:
              * 200 : 请求正确并成功
              * 4XX：请求错误，路径参数错误
              * 5XX： 服务器错误
              * 3XX： 请求中转
              * */
             /*
              * readyState:
              * 1：服务器连接已建立
              * 2： 请求已接收
              * 3：请求处理中
              * 4：请求已完成，且响应已就绪
              * */
         })
         
         
     })
</script>

2.2 getScript加载数据

<!--引入后立即执行-->
<!--<script src="jsTxst.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
    $('button').click(function () {
        //getScript('js文件路径,[callback]')
        //getScript是全局函数，用$调用该函数
        // 如果js文件加载成功，会自动执行js文件中的内容
        
        //1、无回调函数
        $.getScript('jsTxst.js');
        
        //2、有回调函数
        $.getScript('jsTxst.js',function(){
            alert('完成了')
        });
    })
</script>

2.3 getJson加载数据

<script type="text/javascript">
    // Json:数组或字典 []  {}
    // JsonArray: 数组 最外层为 []
    // JsonObject: 字典 最外层为 {
    // JsonString: 字符串 非常少见
    
    //getJson('json文件路径',[])
    //getJson是全局函数，用$调用该函数
    
    $('button').click(function(){
        // 如果我们需要使用json文件中的数据，那么我们需要使用回调函数
        // json请求返回的数据是放在回调函数中的。放在函数中的第一个形参
        $.getJSON('a.json', function(data) {
            // data：存放返回的数据
            
            
        for(var i=0; i < data.length; i++){
                console.log(data[i]['name']);
                
                var $p = $('<p>'+data[i]['name']+ '</p>')
                $('div').append($p);
            }
        });
        
    })
        
</script>

2.4 getAndPost

<script type="text/javascript">
    /*  说明: 以xampp集成环境为例子
    需要将该文件放到xampp目录下的htdocs目录中
    在浏览器中输入你文件的路径 如
    http://localhost/a/getAndPost.html 
    */
        
    
    /*
     * get: url必须是完整的
     * post：url是分开的 
     * IP地址与参数是分开的
     * */
    $('#b1').click(function(){
        // get请求
        // $.get(url, [data], [callback])
        // url:请求地址 
        // data:接口的参数
        //当get请求需要参数的时候，参数的传入格式为：
        // data参数格式:{key:value, key2:value2...}
        // key值:
        
        
        // callback：回调函数：回调函数中有一个参数，存放请求下来的数据
        
        // php文件只能在服务器端执行
        
        /*$.get('getTest.php', function(data){
            console.log(data);
        })*/
        
        var $i1 = $('#user').val()
        var $i2 = $('#pass').val()
        $.get('get.php',{username:$i1, content:$i2}, function(data){
            console.log(data);
        })
        
    })
    
    // post请求
    $('#b2').click(function(){
        // post请求
        // $.post(url, [data], [callback])
        // url:请求地址 
        // data:接口的参数
        //当post请求需要参数的时候，参数的传入格式为：
        // data参数格式:{key:value, key2:value2...}
        // key值:
        
        
        // callback：回调函数：回调函数中有一个参数，存放请求下来的数据


        var $i1 = $('#user').val()
        var $i2 = $('#pass').val()
        $.post('nextPost.php',{username:$i1, content:$i2}, function(data){
            console.log(data);
        })
        
    })
    
</script>

2.5 ajax

<script type="text/javascript">    
    // ajax  : 全局函数 $.ajax(options)
    // options： 数据类型为字典类型 元素ajax所需要的各种参数
    
    
    
    $('#b1').click(function(){
        // 获取输入框中的值
        var $i1 = $('#user').val();
        var $i2 = $('#pass').val();
    
    
        $.ajax({
            // type: 设置请求类型 get post
            type:"get",
            // url 接口
            url:"get.php",
            // async 是否执行异步请求
            async:true,
            // data：接口所需接收的参数  数据格式为字典类型
            data:{username:$i1, content:$i2},
            // dataType 返回的数据格式类型，默认就是json
            dataType:'json',
            // success 数据请求成功时调用，需要接受一个函数类型的参数
            // 该函数有一个默认的形参，形参代表请求时返回的数据
            success: function(data){
                console.log(data);
            },
            // error 当数据请求失败时调用，需要接受一个函数类型的参数
            error: function(){
                console.log('请求失败')
            }
            
            // 后期必须要写的参数： type, url data success
            
            
            });
        
    })
    
    
    $('#b2').click(function(){
        // 获取输入框中的值
        var $i1 = $('#user').val();
        var $i2 = $('#pass').val();
        
        $.ajax({
            // type: 设置请求类型 get post
            type:"post",
            // url 接口
            url:"nextPost.php",
            // async 是否执行异步请求
            async:true,
            // data：接口所需接收的参数  数据格式为字典类型
            data:{username:$i1, content:$i2},
            // dataType 返回的数据格式类型，默认就是json
            dataType:'json',
            // success 数据请求成功时调用，需要接受一个函数类型的参数
            // 该函数有一个默认的形参，形参代表请求时返回的数据
            success: function(data){
                console.log(data);
            },
            // error 当数据请求失败时调用，需要接受一个函数类型的参数
            error: function(){
                console.log('请求失败')
            }
            
            // 后期必须要写的参数： type, url data success
                        
        });
        
    })
    
</script>

2.6 ajax序列化操作与ajax的开始与结束

<script type="text/javascript">
        $('#button').click(function(){
                    
            $(document).ajaxStart(function(){
            console.log('开始请求');
            })
        
            $(document).ajaxStop(function(){
            console.log('结束请求')
            })    
            
            // 表单序列化
            $.ajax({
                type:"post",
                url:"post.php",
                async:true,
                // serialize 表单序列化操作
                // 注 所有的input要写在form 中 input 要有name属性
                // 并且name属性的值要根据接口所需要的参数的key值来
                // 确定，不能随意写。
                
                data:$('form:eq(0)').serialize(),
                success:function(data){
                    console.log(data);
                }
                
            });
            
        })
    </script>